<template>
    <div>我今年的年龄 <input type="text" v-model.number="age" /></div>
    <div>我明年的年龄 {{ nextAge }}</div>
    <div>我后年的年龄 <input type="text" v-model.number="nextAge2" /></div>
</template>

<script setup>
import { computed, ref } from 'vue';

let age = ref(20)

// 写法1，直接返回需要的数据，必须掌握
const nextAge = computed(
    () => {
        return age.value + 1
    }
)

// 写法2，set/get钩子函数，一般应用在 既可以输入，也可以依赖其他数据 
const nextAge2 = computed({
    get() {
        return age.value + 2
    },
    set(value) {
        age.value = value - 2
    }
})
</script>